<!--
 * @Author: your name
 * @Date: 2021-06-28 16:58:28
 * @LastEditTime: 2021-07-12 14:22:12
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\components\batchProcessing\tabs\tabs2.vue
-->
<template>
  <div>
    <a-steps :current="currentSteps" class="steps">
      <a-step title="上传文件" description="上传雇员信息" />
      <a-step title="字段匹配" description="匹配导入字段" />
      <a-step title="系统导入" description="完成数据批量上传" />
    </a-steps>

    <Steps1 class="steps_cnt" v-if="currentSteps === 0" @nextBtnClk="nextBtnClkFn">
      <div slot="batchLeavePosition"></div>
    </Steps1>
    <Steps2 class="steps_cnt" v-if="currentSteps === 1" @ensureBtnClk="ensureBtnClkFn" />
    <Steps3 class="steps_cnt" v-if="currentSteps === 2" />
  </div>
</template>

<script>
import Steps1 from '../steps/steps1'
import Steps2 from '../steps/steps2'
import Steps3 from '../steps/steps3'

export default {
  name: 'tabs2',
  components: { Steps1, Steps2, Steps3 },
  mounted () {
    this.$Storage.set('excelTypes', 2)
  },
  data () {
    return {
      currentSteps: 0
    }
  },
  methods: {
    nextBtnClkFn (val) {
      this.currentSteps = val
    },

    ensureBtnClkFn (val) {
      this.currentSteps = val
    }
  },
}
</script>

<style scoped>
.steps,
.steps_cnt {
  max-width: 950px;
  margin: 16px auto;
}
</style>
